﻿@page "/Emoji"
@using FluentUI.Demo.Shared.Pages.Emoji.Examples;

<PageTitle>@App.PageTitle("Emoji")</PageTitle>

<h1>Emoji</h1>

<p>
    The <a title="Fluent Emoji" href="https://github.com/microsoft/fluentui-emoji" target="_blank" rel="noopener">Fluent Emoji</a>
    are a (still growing) collection of familiar, friendly, and modern emoji from Microsoft. At the moment there are over 1500 distinct emoji
    available in color, flat and high contrast styles and 6 different skintones (where applicable) divided in 9 groups. In total the
    collections consists of well over 13k emoji in SVG format.
</p>
<p>
    This <a href="https://www.nuget.org/packages/Microsoft.FluentUI.AspNetCore.Components.Emoji" target="_blank">FluentUI Emoji NuGet package</a>
    contains all these emoji, which you can access directly in your projects.
    To use them, simply reference this package in your project.
</p>
<p>
    <div class="demopanel" style="margin: 1rem 0; padding: 1.5rem;">
        <h3>Important</h3>
        As of version 4.11.0 of our Emoji package, we are packaging each emoji category (activity, food, etc.) in its own assembly.
        This became necessary due to the large number of emoji and some compiler limitations. Nothing has changed on how the Emoji package needs to be installed or added to your project.
        There is a just a small change needed to your imports file (or using statements).
        <br />
        <br />
        <blockquote>
        To use the new version in your (upgraded) projects, you need add the following <code>&#64;using</code> statement to your _Imports.razor file:
        <CodeSnippet Language="csharp">&#64;using Emoji = Microsoft.FluentUI.AspNetCore.Components.Emoji</CodeSnippet>
        </blockquote>
        <br />
        Alternatively, you can use the full namespace in your code or define the alias for the namespace at the top of your file.
    </div>
</p>

<p>
    You can use any of these emoji by levaraging the <code>&lt;FluentEmoji&gt;</code> component. See below for the parameters and examples. There is
    also a search capability available on this page which allows you to browse through all the available emoji.
</p>

<h2 id="overview">Overview</h2>

<DemoSection Component="typeof(EmojiDefault)" Title="Emoji samples">
    <Description>
        You can choose a predefined Emoji.
    </Description>
</DemoSection>

<DemoSection Component="typeof(EmojiDifferentSizes)" Title="Different sizes">
    <Description>
        You can specify a custom size by setting the Width to a value anywhere between 32 - 1024px, though we suggest scaling on sizes of 32 so 32, 64, ... to get the best result.
    </Description>
</DemoSection>

<h2>Explore Emojis</h2>

<EmojiExplorer />
<br />
<br />

<h2 id="documentation">Documentation</h2>

<ApiDocumentation Component="typeof(FluentEmoji<>)" InstanceTypes="@(new[] {typeof(Emoji)})" GenericLabel="Emoji"></ApiDocumentation>
